<template>
  <div class="home">
    <Head @showMenu="showMenu"/>
    <div class="content">
      <router-view/>
      <Introduce v-if="showBottom" :showBottom="true"/>
    </div>
    <van-popup v-model:show="menu" position="left" :style="{ width: '80%', height: '100%' }">
      <div class="menu">
        <div class="menu-box">
          <p class="menu-column" @click="switchPath('/stoneIsland')">
            <span>STONE ISLAND</span>
            <van-icon name="arrow" />
          </p>
          <p class="menu-column" @click="switchPath('/shadowProject')">
            <span>SHADOW PROJECT</span>
            <van-icon name="arrow" />
          </p>
          <p class="menu-column">
            <span>JUNIOR</span>
            <van-icon name="arrow" />
          </p>
          <p class="menu-column" @click="switchPath('/brand')">
            <span>品牌</span>
            <van-icon name="arrow" />
          </p>
          <div class="login">
            <p class="btn" @click="$router.push('/login')">登录</p>
          </div>
        </div>
        <Introduce @closeMenu="closeMenu"/>
      </div>
    </van-popup>
  </div>
</template>

<script>
const showArr = ['CustomerService', 'sanlitun']
import Introduce from '@/components/Introduce.vue'
import Head from '@/components/Head.vue'
export default {
  name: 'home',
  components: {
    Introduce,
    Head
  },
  data() {
    return {
      menu: false
    }
  },
  methods: {
    showMenu() {
      this.menu = !this.menu
    },
    closeMenu() {
      this.menu = false
    },
    switchPath(path) {
      this.$router.push(path)
      this.closeMenu()
    }
  },
  computed: {
    showBottom() {
      return !showArr.includes(this.$route.name)
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.van-overlay {
  top: 1px;
}
.menu {
  display: flex;
  flex-direction: column;
  height: 100%;
  .menu-box {
    flex: 1;
    padding: 20px 0;
    .menu-column {
      display: flex;
      justify-content: space-between;
      width: 80%;
      padding-left: 20px;
      border-bottom: 1px solid #333;
      color: #333;
      margin-top: 10px;
    }
    .login {
      display: flex;
      padding-top: 20px;
      justify-content: center;
      margin-top: 35px;
      border-top: 1px solid #333;
      .btn {
        display: inline-block;
        line-height: 36px;
        width: 140px;
        color: #fff;
        background: #333;
        text-align: center;
      }
    }
  }
}
.home {
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    overflow: hidden scroll;
  }
}
</style>